// Custom Theming for NG-ZORRO
// For more information: https://ng.ant.design/docs/customize-theme/en
@import "../node_modules/ng-zorro-antd/style/color/colorPalette.less";
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";

:root {
  --background-color: white;
  --component-background: white;
  --text-color: @rose-9;
  --tweet-background: #D4EDFC;
  --news-background: #eef0f4;
  --card-height: 320px;
  --card-width: 16%;
  --border-shadow: 5px 5px 12px -3px rgba(0, 0, 0, 0.59);
}

:root {
  .dark-mode {
    --background-color: #14161E;
    --component-background: #282A3A;
    --text-color: white;
    --tweet-background: #004277;
    --news-background: #282A3A;
    --border-shadow: 8px 8px 33px rgb(86 96 112 / 20%);
  }

  .ant-typography {
    color: var(--text-color);
  }

  .ant-modal-title {
    color: var(--text-color);
  }

  .ant-modal-close {
    color: var(--text-color);

  }
}

@card-size: 400px;
@tweet-color: var(--tweet-background);
@news-color: var(--news-background);


// Override less variables to here
// View all variables: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less
// color palettes rose
@rose-base: #B9D2D6;
@rose-1: color(~`colorPalette('@{rose-6}', 1) `);
@rose-2: color(~`colorPalette('@{rose-6}', 2) `);
@rose-3: color(~`colorPalette('@{rose-6}', 3) `);
@rose-4: color(~`colorPalette('@{rose-6}', 4) `);
@rose-5: color(~`colorPalette('@{rose-6}', 5) `);
@rose-6: @rose-base;
@rose-7: color(~`colorPalette('@{rose-6}', 7) `);
@rose-8: color(~`colorPalette('@{rose-6}', 8) `);
@rose-9: color(~`colorPalette('@{rose-6}', 9) `);
@rose-10: color(~`colorPalette('@{rose-6}', 10) `);


@primary-color: @rose-9;

@primary-color-hover: color(~`colorPalette('@{primary-color}', 5) `);
@primary-color-active: color(~`colorPalette('@{primary-color}', 7) `);
@primary-color-outline: fade(@primary-color, @outline-fade);

@btn-circle-size: 64px;
@btn-circle-size-lg: 64px;
@btn-circle-size-sm: 64px;

@body-background: var(--background-color);
@component-background: var(--component-background);
@label-color: var(--text-color);
@text-color: var(--text-color);
@text-color-secondary: @rose-9;
@divider-color: var(--text-color);
@border-radius-base: 8px;
//@note-color: #BCE29E;

.ant-btn-circle {
  height: 42px;
  width: 42px;
}

.anticon {
  font-size: 18px;
}
